<extend name="template/base_index" />

<block name="area_header">
	<link rel="stylesheet" type="text/css" media="all" href="__CSS__/wxshop.css">
	<link type="text/css" rel="stylesheet" src="__CDN__/jquery-uploadify/3.2.1/uploadify.css" />
	<script type="text/javascript" src="__CDN__/jquery-uploadify/3.2.1/jquery.uploadify.min.js"></script>
	<link type="text/css" rel="stylesheet" href="__CDN__/select2/3.5.2/select2.css" />
	<script type="text/javascript" src="__CDN__/select2/3.5.2/select2.min.js"></script>
	<script type="text/javascript" src="__CDN__/select2/3.5.2/select2_locale_zh-CN.js"></script>
	<link rel="stylesheet" type="text/css" media="all" href="__CDN__/jquery-datetimepicker/jquery.datetimepicker.css">
	<script type="text/javascript" src="__CDN__/jquery-datetimepicker/jquery.datetimepicker.js"></script>
</block>

<block name="area_body">
	{:W('Menus/topbar')}
	<div class="admin-main container-fluid">
		{:W('Menus/left')}
		<div class="admin-main-content">
			{:W('Menus/breadcrumb')}

			<div class="col-main">
				<div class="main-hd">
					<h2>添加商品</h2>
				</div>
				<div class="main-bd clearfix">
					<form class="productForm form-horizontal" method="post">
						<input type="hidden" name="store_id" value="{$store_id}" />
                        <input type="hidden" name="cates" value="{$cates}" />
                        <input type="hidden" name="tariff_code" value="{$tariff_code}" />

						<input type="hidden" name="property" value="" class="property" />
						<input type="hidden" name="main_img" value="" class="main_img" />
						<input type="hidden" name="img" value="" id="img" />
                        <input type="hidden" name="img_post" value="" id="img_post" />
                        <input type="hidden" name="img_post_bg" value="" id="img_post_bg" />
						<h3><i>●</i>基本信息</h3>
						<div class="form-group col-lg-12 col-md-12 clearfix">
							<label for="" class="control-label col-lg-2 col-md-2">选择类目</label>
							<div class="col-lg-10 col-md-10">
								<div class="category_select pt5" id="js_category_txt">
									<span class="category_txt">{$catename}</span>
									<a href="{:U('Admin/Product/precreate',array('store_id'=>$store_id))}" class="js_categorychange">修改</a>
								</div>
								<span class="help-block">商品上架后不可修改，请谨慎选择</span>
							</div>
						</div>
						<div class="js_prop form-group col-lg-12 col-md-12 clearfix">
							<label for="" class="control-label col-lg-2 col-md-2">商品属性
								<br/><span class="help-block">(选填)</span>
							</label>
							<div class="col-lg-10 col-md-10">
								<div class="well">
									<div class="loading">
										<img src="__CDN__/common/loading.gif" />
									</div>
									<div class="prop-list clearfix">

									</div>
									<hr>
									<div class="btn-controls">
										<a href="{:U('Admin/CategoryProp/add',array('cate_id'=>$cate_id))}" target="_blank" class="btn btn-sm btn-primary"><i class="fa fa-plus"></i>添加属性</a>
										<a href="javascript:void(0);"  class="btn btn-sm btn-primary js_prop_refresh"><i class="fa fa-refresh"></i>刷新</a>
									</div>

								</div>
								<span class="help-block">商品上架后属性不可修改，请谨慎选择</span>

							</div>
						</div>

						<div class="form-group col-lg-12 col-md-12 clearfix">
							<label for="" class="control-label col-lg-2 col-md-2">商品名称</label>
							<div class="col-lg-10 col-md-10">
								<input name="product_name" maxlength="60" class="js_product_name form-control input-normal input-sm" />
								<span class="help-block">限30个字</span>
							</div>
						</div>
						<div class="form-group col-lg-12 col-md-12 clearfix ">
							<label for="" class="control-label col-lg-2 col-md-2 ">商品分组
								<br/><span class="help-block"></span>
							</label>
							<div class="col-lg-10 col-md-10">
								<select name="product_group" class="js_product_group">
									<option value="0">=请选择=</option>
									{:W("Partials/datatree",array(getDatatree('WXPRODUCTGROUP'),true,0))}
								</select>
							</div>
							<div class="js_group_time hide" style="margin-left: 280px">
								<label>起始时间:</label>&nbsp;<input type="text" class="form-control input-normal input-sm startdatetime" name="group_start_time" value="{$vo['start_time']|date='Y-m-d G:i:s',###}"/>&nbsp;&nbsp;
								<label>终止时间:</label>&nbsp;<input type="text" class="form-control input-normal input-sm enddatetime" name="group_end_time" value="{$vo['end_time']|date='Y-m-d G:i:s',###}"/>
							</div>
						</div>



						<div class="js_sku form-group col-lg-12 col-md-12 clearfix hide">
							<label for="" class="control-label col-lg-2 col-md-2">商品规格</label>
							<div class="col-lg-10 col-md-10">
								<label class="radio-inline">
									<input type="radio" name="has_sku" class="has_sku" checked="checked" value="0"> 统一规格
								</label>
							</div>
						</div>

						<div class="form-group col-lg-12 col-md-12 clearfix js_frm_gp_sku hide">
							<label for="" class="control-label col-lg-2 col-md-2">当前价</label>
							<div class="col-lg-10 col-md-10">
								<input name="price" class="price form-control input-short input-sm" />元
								<span class="help-block">当前价,需低于原价</span>
							</div>
						</div>
						<div class="form-group col-lg-12 col-md-12 clearfix js_frm_gp_sku hide">
							<label for="" class="control-label col-lg-2 col-md-2">原价
								<br/><span class="help-block">(选填)</span>
							</label>
							<div class="col-lg-10 col-md-10">
								<input name="ori_price" maxlength="60" class="oriprice form-control input-short input-sm" />元
								<span class="help-block"></span>
							</div>
						</div>
                        <div class="form-group col-lg-12 col-md-12 clearfix js_frm_gp_sku">
                            <label for="" class="control-label col-lg-2 col-md-2 ">商品总销量
                                <br/><span class="help-block"></span>
                            </label>
                            <div class="col-lg-10 col-md-10">
                                <input name="total_sales" maxlength="60" value="0" class="form-control input-short input-sm" />
                            </div>
                        </div>

                        <div class="form-group col-lg-12 col-md-12 clearfix js_frm_gp_sku hide">
                        <label for="" class="control-label col-lg-2 col-md-2 ">商品库存
                            <br/><span class="help-block"></span>
                        </label>
                        <div class="col-lg-10 col-md-10">
                            <input name="quantity" maxlength="60" class="oriprice form-control input-short input-sm" />
                        </div>
                        </div>

                        <div class="form-group col-lg-12 col-md-12 clearfix ">
                            <label for="" class="control-label col-lg-2 col-md-2 ">计量单位
                                <br/><span class="help-block"></span>
                            </label>
                            <div class="col-lg-10 col-md-10">
                            <select name="dt_goods_unit" style="width: 100px;" class="dt_goods_unit input-normal" >
                                {:W("Partials/datatree",array(getDatatree('GOODSUNIT'),true,0,1))}
                            </select>
                            </div>
                        </div>


						<div class="form-group col-lg-12 col-md-12 clearfix js_frm_gp_sku">
							<label for="" class="control-label col-lg-2 col-md-2 ">商品重量(毛重)
								<br/><span class="help-block"></span>
							</label>
							<div class="col-lg-10 col-md-10">
								<input name="weight" maxlength="60" class="oriprice form-control input-short input-sm" />千克
								<span class="help-block">商品单个重量(毛重)，单位：kg（千克）</span>
							</div>
						</div>
                        <div class="form-group col-lg-12 col-md-12 clearfix hide">
                            <label for="" class="control-label col-lg-2 col-md-2">产销国</label>
                            <div class="col-lg-10 col-md-10">

                                <input name="source" maxlength="60" type="hidden" class="form-control input-normal input-sm" />
                                <select name="dt_origin_country" style="width: 120px;" class="dt_origin_country input-normal" >
                                    {:W("Partials/datatree",array(getDatatree('COUNTRY'),true,0,1))}
                                </select>

                                <span class="help-block">商品产销国</span>
                            </div>
                        </div>



						<div class="form-group col-lg-12 col-md-12 clearfix js_frm_gp_sku hide">
							<label for="" class="control-label col-lg-2 col-md-2">商品条码<i data-toggle="tooltip" class="fa fa-question" title="填写商品条码后，用户可通过扫码查找到你的商品，建议填写"></i>
								<br/><span class="help-block">(选填)</span>
							</label>
							<div class="col-lg-10 col-md-10">
								<input name="product_code" maxlength="60" class="oriprice form-control input-short input-sm" />
								<span class="help-block"></span>
							</div>
						</div>

						<div class="form-group col-lg-12 col-md-12 clearfix">
							<label for="" class="control-label col-lg-2 col-md-2">商品图片</label>
							<div class="col-lg-10 col-md-10">
								主图<span class="text-muted">(建议尺寸为640像素*640像素，大小不超过500kb)<i data-toggle="tooltip" class="fa fa-question" title="商品主图将会作为商品的默认图片出现在货架及商品详情页。"></i></span>
								<!-- 图片选择DOM结构 -->
								<div class="wxuploaderimg clearfix main_img"  data-maxitems="1">
									<div class="img-preview clearfix" >
										
									</div>
									<div class="add">
										<i class="fa fa-plus"></i>
									</div>
								</div>
								
								<!-- 图片选择DOM结构 -->
							</div>
						</div>
						<div class="form-group col-lg-12 col-md-12 clearfix">
							<label for="" class="control-label col-lg-2 col-md-2">&nbsp;</label>
							<div class="col-lg-10 col-md-10">
								其他图片<span class="text-muted">(选传，单张图片大小不超过500kb，最多10张)<i class="fa fa-question" data-toggle="tooltip" title="将出现在商品图片库，方便用户更好的了解您的商品。"></i></span>
								<!-- 图片选择DOM结构 -->
								<div class="wxuploaderimg clearfix product-imglist"  data-maxitems="10">
									<div class="img-preview clearfix" >
										
									</div>
									<div class="add">
										<i class="fa fa-plus"></i>
									</div>
								</div>
								
								<!-- 图片选择DOM结构 -->
							</div>
						</div>

						<div class="form-group col-lg-12 col-md-12 clearfix hide">
							<label for="" class="control-label col-lg-2 col-md-2">商品海报以及背景(用于APP首页展示)</label>
							<div class="col-lg-10 col-md-10">
								海报<span class="text-muted">(尺寸比例宽高比5:8，适合大小750*1200,大小不要超过500kb)<i data-toggle="tooltip" class="fa fa-question" title="商品海报主要用于APP首页展示。"></i></span>
								<!-- 图片选择DOM结构 -->
								<div class="wxuploaderimg clearfix img_post"  data-maxitems="1">
									<div class="img-preview clearfix" >

									</div>
									<div class="add">
										<i class="fa fa-plus"></i>
									</div>
								</div>
								<!-- 图片选择DOM结构 -->
							</div>
						</div>

                        <div class="form-group col-lg-12 col-md-12 clearfix hide">
                            <label for="" class="control-label col-lg-2 col-md-2">&nbsp;</label>
                            <div class="col-lg-10 col-md-10">
                                背景<span class="text-muted">(尺寸比例宽高比9:16,适合大小1080*1920,大小不要超过500kb)<i data-toggle="tooltip" class="fa fa-question" title="商品海报主要作为海报的背景。"></i></span>
                                <!-- 图片选择DOM结构 -->
                                <div class="wxuploaderimg clearfix img_post_bg"  data-maxitems="1">
                                    <div class="img-preview clearfix" >

                                    </div>
                                    <div class="add">
                                        <i class="fa fa-plus"></i>
                                    </div>
                                </div>
                                <!-- 图片选择DOM结构 -->
                            </div>
                        </div>


						<div class="form-group col-lg-12 col-md-12 clearfix">
							<label for="synopsis" class="control-label col-md-2 col-lg-2 ">商品简介</label>
							<div class="col-md-10 col-lg-10">
								<textarea name="synopsis" id="synopsis" class="form-control" rows="5"></textarea>
								<div class="help-block">(您最多可以输入500个字)</div>
							</div>
						</div>
						

						
						<div class="form-group col-lg-12 col-md-12 clearfix js_frm_gp_buylimit">
							<label for="" class="control-label col-lg-2 col-md-2">是否限购</label>
							<div class="col-lg-10 col-md-10">
								<label class="radio-inline">
									<input type="radio" name="isbuylimit" checked="checked" value="0">不限购
								</label>
								<label class="radio-inline">
									<input type="radio" name="isbuylimit" value="1">限购
								</label>

								<input type="text" style="width: 100px;" name="buylimit" value=""  class="hidden input-sm" />
							</div>
						</div>

						<h3 class="pull-left hide"><i>●</i>售后信息</h3>

						<div class="form-group col-lg-12 col-md-12 clearfix">
							<label for="" class="control-label col-lg-2 col-md-2">发票</label>
							<div class="col-lg-10 col-md-10">
								<label class="radio-inline">
									<input type="radio" name="has_receipt" checked="checked" value="0">无
								</label>
								<label class="radio-inline">
									<input type="radio" name="has_receipt" value="1">有
								</label>

							</div>

						</div>
						<div class="form-group col-lg-12 col-md-12 clearfix">
							<label for="" class="control-label col-lg-2 col-md-2">保修</label>
							<div class="col-lg-10 col-md-10">
								<label class="radio-inline">
									<input type="radio" name="under_guaranty" checked="checked" value="0">无
								</label>
								<label class="radio-inline">
									<input type="radio" name="under_guaranty" value="1">有
								</label>

							</div>

						</div>
						
						<div class="form-group col-lg-12 col-md-12 clearfix">
							<label for="" class="control-label col-lg-2 col-md-2">退换货</label>
							<div class="col-lg-10 col-md-10">
								<label class="radio-inline">
									<input type="radio" name="support_replace" checked="checked" value="0">不支持
								</label>
								<label class="radio-inline">
									<input type="radio" name="support_replace" value="1">支持
								</label>

							</div>

						</div>

						<div class="form-group col-lg-12 col-md-12 clearfix tool-bar text-center border">
							<a target-form="productForm" href="{:U('Admin/Product/create')}" onclick="return check();"  class="ajax-post btn btn-primary" id="js_submit"><i class="fa fa-check"></i>确定</a>
						</div>
					</form>
				</div>
			</div>

			<include file="template/wxpicture" />
		</div>
		<!-- END admin-main-content -->
	</div>
	<!-- END admin-main-->
</block>

<block name="area_footer">
	<script type="text/javascript">
		window.ServicesURL = {
			groupGetAll:"",
			groupAdd:"",
			cateAllProp:"{:U('Admin/Product/cateAllProp')}",
			skulist:"{:U('Admin/Product/skulist')}",
		};
	</script>
	<script type="text/javascript" src="__JS__/product.js?v=__APP_VERSION__"></script>
	<script type="text/javascript">
		function getData(){
			$(".property").val("");
			$(".propsel").each(function(index,item){
				$propvalue = $(item).val();
				if($propvalue != "=请选择="){
					$(".property").val($(".property").val()+$propvalue+";");
				}
			});

			var main_img = $(".main_img .img-preview img").attr("data-imageid");
			if(main_img){
				$(".main_img").val(main_img);
			}
			$("#img").val("");
			$(".product-imglist .img-preview img").each(function(index,item){
				$("#img").val($("#img").val()+$(item).attr("data-imageid")+",");
			});


			var img_post = $(".img_post .img-preview img").attr("data-imageid");
			if(img_post){
				$("#img_post").val(img_post);
			}

            var img_post_bg = $(".img_post_bg .img-preview img").attr("data-imageid");
            if(img_post_bg){
                $("#img_post_bg").val(img_post_bg);
            }

		}
		
		
		function check(){
			getData();
			return false;
			var txt = $(".js_product_name").val();
			var len = txt.replace(/[^\x00-\xff]/g, 'xx').length ; 
			if(len == 0){					
				$.scojs_message('商品名称必须填写', $.scojs_message.TYPE_ERROR);
				return false;
			}
			if(len > 30){
				$.scojs_message('商品名称不能超过30个字', $.scojs_message.TYPE_ERROR);
				return false;
			}
			return true;
		}

		function appendProp(list){
			
			$ele = $(".js_prop .prop-list");
			$ele.empty();
			for(var i=0;i<list.length;i++){
				//创建一个dropdown
				$propName = $('<span>'+list[i].name+'</span>');
				$prop = $('<div class="dropdown dropdown-toggle"></div>');
				$ele.append($("<div class='prop-item' ></div>").attr("data-id",list[i].id).append($propName).append($prop));
				
				if(list[i].property_value){

					$propValue = $("<select class='propsel propvalue-list dropdown-menu'></select>");
					$prop.append($propValue);
					var propvaluelist = list[i].property_value;
					$propValue.append("<option class='propvalue-item'>=请选择=</option>");
					for(var j=0;j<propvaluelist.length;j++){
						$propValueItem = $("<option class='propvalue-item'></option>");
						$propValueItem.attr("data-id",propvaluelist[j].id).text(propvaluelist[j].valuename).val(list[i].id+","+propvaluelist[j].id);
						$propValue.append($propValueItem);
					}
				}

			}	
			
			
		}
		
		
		
		 //商品属性
		function queryProp() {
			
			
			$(".js_prop .loading").show();
//			var cates = "{$cates}";
			var last_cate = "{$cate_id}";
			$.post(window.ServicesURL.cateAllProp, {
				cate_id: last_cate
			}).done(function(data) {
				//
				if (data.status) {
					if(data.info == null){
						$ele = $(".js_prop .prop-list");
						$ele.html("无属性");
						return ;
					}
					appendProp(data.info);
					$(".propsel").select2({
						placeholder: "=选择=",
						language: "zh-CN",
					});
				} else {
					$.scojs_message('添加失败!', $.scojs_message.TYPE_ERROR);
				}
			}).always(function(){
				$(".js_prop .loading").hide();
			});
		}

		function productProp(){
			
			$(".js_prop .prop-list").click(function(ev){
				$ele = $(ev.target);
				if(!$ele.hasClass('link_a')){
					return ;
				}
				$propitem = $ele.parents(".prop-item");
				$ele.addClass("selected");
				$propitem.find("button.dropdown-toggle").html($ele.text()+"<span class='caret'></span>");
			});
			
			setTimeout(queryProp,700);
		}


        //国别选择时的操作
        function initCountry(){
            $(".dt_origin_country").change(function(){
                var val = $(".dt_origin_country").find("option:selected").text();
                $("input[name='source']").val(val);
            });
            $(".dt_origin_country").change();
        }

        //初始化select2 控件
        function initSelect2(){
            $('select').select2();
        }
		
		$(function() {
			$(".js_prop_refresh").click(function(){
				queryProp();
			});

			productProp();
			//图片上传
			wxuploadimg.init({cont:".wxuploaderimg"});
			//
			$(".js_frm_gp_buylimit input[type=radio]").click(function(){
				console.log($(this).val());
				console.log($(".js_frm_gp_buylimit input[type=text]"));
				if($(this).val() == 1){
					$(".js_frm_gp_buylimit input[type=text]").removeClass("hidden");
				}else{
					$(".js_frm_gp_buylimit input[type=text]").addClass("hidden");
				}
			});
			$(".js_frm_gp_buylimit input[type=text]").change(function(){
				var tmp = $(this).val();
				$(this).attr("value",tmp);
			});
			initCountry();
            initSelect2();
			/*商品分组*/
			$('.js_product_group').click(function(){
				if($(this).val() != 0){
					$('.js_group_time').removeClass('hide');
				}else{
					$('.js_group_time').addClass('hide');
				}
			});

			$('.startdatetime').datetimepicker({
				lang: 'ch',
				format:'Y-m-d H:i:s',
				timepicker:false,
			});
			$('.enddatetime').datetimepicker({
				lang: 'ch',
				format:'Y-m-d  H:i:s',
				timepicker:false,
			});

		})
		
	</script>
	
</block>